Hello and welcome to this video.
In this video we are going to be drawn in that time and the hands for the analogue clock.
So this is what our producer looks like at the moment and this is the code we have so far.
Got it.
So what I'm going to do now I'm going to add a function that will be used to generate or create that
time for the clock.
So this will include adding some variables all in need to use the DATE TO GET the hour the minute and
the second.
So I've added this function here from like 50 to 1 to the 6 to 8.
This is the function that will be responsible for drawing in the time.
So here we've defined the function here.
Core draw time and inside parentheses we are referencing this to prep parameters the context and the
radius.
Here we've caught some variable.
So we're using the date to get our minutes and the second saw this year we've got variable quad now
which will display a big current date variable hour which will give us.
All we're doing now.
Get ours were referenced in this variable now.
But get in the hours.
Here again we use in the variable is variable.
Now to get the minutes to get the second so this block here.
These are variables that will get the current time now.
The hours the minutes the set and the rest of the block of code here.
Basically we are going to use.
We're going to calculate the angle of our hand and draw it day length which is going to be 50 percent
of the radius and a wave which is going to be 7 percent of the rate.
So the same technique is used for the minutes and the second so this block off code here calculates
the angle of our hand and also draws it in length which is going to be 50 percent of radius and the
width of 7 percent of radius So applying the same technique for the minutes and 4 seconds.
So I have to include this function inside the drop block method or drop the lock function so I just
copy that and go to where the drol clock function is and just include that so we got the draw clock
function so I just come down here and add that so this is the function that will reference the other
functions.
Okay so the next function I am going to add on is going to be defunct and that will draw the tall hands
for the.
So now I had the function to draw the hand.
If you notice in this function here or draw time.
We already made reference to this function here so you can see here the draw hand here.
Could draw a hand here and would draw a hand here so we've already reference this function so there's
no need to add this function to the draw clock function because we are referencing it inside the draw
time function so quickly just run true for the draw our hand is to in here inside with draw and function.
This Panthers here in siby parentheses where the contacts who got the position the length and the width.
So these are all parameters that are passed in to this draw.
Hand function.
So again we've got the big in Path which is our chawl start off the path.
So this is clearly where the trial begins and then we've got the line with this represents the line
on the with of the hand and we're set in that to the width of the line cap and was set in that the line
cap property physically easy used to set or return the style of the end caps for.
Like the value round and square make the lines slightly longer.
So in this case we've used the value round.
So here we've got the mould method basically represents how you want the hand to move.
So the default value here will go 0 0 we a present position on the x and y coordinates.
And here are the retained method or way passing in position.
Okay and here on line 78 with the line to basically repeat those line to the line to metter pads a new
point and creates a line to that point from the last specified point in big canvas.
The key thing to know that this method does not draw the line so my method is actually used to draw
the path on the compass.
So we've got the moves to basically.
This method represents how the hand of the clock moves.
And we've got the rotate again.
This is irresponsible in that inside the parent they see passed the perimeter of position so it will
rotate based on the position.
And here we've got the line to move already covered what the line is and then this drug.
The stroke is actually this stroke metter actually draws the path on the compass for the alpha drawing
of the line will be done and used in this truck metate a game we use in the Rotate method to do the
positioning because we're past him.
The position here.
Is here we've set it to cross to position.
So here we go.
Negative position also in negative length.
So we means it will call in the opposite direction so that is basically the functions that all create
the time draw the time saw the hand for the clock.
So I'm just going to save that file save all day and we can check in out in our inside our browser and
just see excel and so you can see we've got our hand bottom the clock is not moving so we need to create
a clock start method that would be use to start the clock so we've got everything in place.
We've got the numbers with the hand we just need the clock to start.
Now they are forced to start the clock.
We need to haul the draw clock function at intervals so we need to set the intervals for the drop clock
functions to run or to stop.
So we are going to modify the draw clock function to start the clock.
We need to modify where we're calling the clock from and also change sets the interval.
So here on line 6 where we've got the draw clock we are going to change this block of code.
So here I've changed the line 6 so I'm use call in the set interval method.
So this is what would be responsible for starting the clock and we can see here the interval is 1000
milliseconds which is equivalent to 1 second.
So this basically will allow the clock to start every second the clock ticking.
So that's what this this this this in mealie seconds.
So that is how they set into all method works.
So the drawer clock will be called for each one thouse on the second intervals.
So as I said this change should.
We should get the clock work in now.
So let's go back to the clock.
I'm just going to refresh.
You can see the clock ticking which is referencing the current time on my computer.
Excellent.
So if you've got your clock work in many many congratulations if you got any issues.
Just take a look at the code again.
Or just send me a message.
Be more than happy to see.
So congratulations and take care.